<template>
	<view>
		<uni-datetime-picker v-model="dateRange" returnType="timestamp" type="daterange" @change="getBills"
			@maskClick="maskClick" />
		<p class="bills-by-month-stastic">本月总花费：<u-count-to :startVal="0" :endVal="monthTotal" :duration="400"
				:decimals="2"></u-count-to>
		</p>
		<p class="bills-by-month-stastic">本月日均花费：<u-count-to :startVal="0" :endVal="monthAvg" :duration="400"
				:decimals="2"></u-count-to>
		</p>
		<billsList v-if="billsList.length" :bills-list="billsList" />
		<view class="empty" v-else>
			无记录，请点击下方“添加”添加账单
		</view>
	</view>
</template>

<script>
	import {
		callCloudFunction
	} from '@/api/requests.js'
	import billsList from '../../../components/billsList/billsList.vue'
	import myTabbar from '../../../components/myTabbar/myTabbar.vue'
	export default {
		name: 'billsByMonth',
		data() {
			return {
				dateRange: [],
				userInfo: {},
				billsList: []
			}
		},
		components: {
			billsList
		},
		computed: {
			monthTotal() {
				let count = 0
				this.billsList.forEach(item => {
					count += Number(item.count)
				})
				return count
			},
			monthAvg() {
				let date = Math.ceil((this.dateRange[1] - this.dateRange[0]+1) / (24 * 3600 * 1000))
				return (this.monthTotal / date).toFixed(2)
			},
			timeRangeShow() {
				return `${uni.$u.timeFormat(this.dateRange[0], 'yyyy-mm-dd')}/${uni.$u.timeFormat(this.dateRange[1], 'yyyy-mm-dd')}`
			}
		},
		methods: {
			init() {
				const that = this
				const year = new Date().getFullYear()
				const month = new Date().getMonth() + 1
				that.month = year + '-' + month
				uni.getStorage({
					key: 'userInfo',
					success: function(res) {
						that.userInfo = res.data
						const {
							monthFirthDate
						} = res.data
						const thisMonthFirstDate = new Date(`${year}-${month}-${monthFirthDate}`).getTime()
						const lastMonthFirstDate = new Date(`${year}-${month-1}-${monthFirthDate}`).getTime()
						const nextMonthFirstDate = new Date(`${year}-${month+1}-${monthFirthDate}`).getTime()
						if (new Date().getTime() < thisMonthFirstDate) {
							that.dateRange = [lastMonthFirstDate, new Date().getTime()]
						} else {
							that.dateRange = [thisMonthFirstDate, new Date().getTime()]
						}
						that.getBills()
					}
				});
			},
			getBills(dateRange) {
				const that = this
				callCloudFunction('getBills', {
						owner: that.userInfo._id,
						dateRange: dateRange ? dateRange : that.dateRange,
					}, res => {
						that.billsList = res.result.data.map(bill => {
							bill.dateShow = uni.$u.timeFormat(bill.date, 'yyyy-mm-dd')
							return bill
						})
					},
					err => {
						uni.showModal({
							content: `获取账单失败${err}`,
							showCancel: false
						})
					})
			},
			change(dateRange) {
				that.dateRange = dateRange
				this.getBills(dateRange)
			},
			maskClick(timeRange) {
				
			}
		},
		mounted() {
			this.init()
		}
	}
</script>

<style>
	.time-range-show {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 36rpx;
		color: chocolate;
	}

	.bills-by-month-stastic {
		padding-left: 30rpx;
	}
	.empty{
		margin-top: 40rpx;
		text-align: center;
		color: orangered;
	}
</style>
